<%--
$Id: role-list.jsp 13 2010-11-02 15:35:59Z feigme $
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/content/commons/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><fmt:message key="user.manager"/></title>
</head>
<body>
<%@ include file="user-menu.jsp" %>
<label id="error"><form:errors path="role.*" cssStyle="color:red;"/></label>
<div>
<table width="100%" border="0">
<tr>
<td width="50%" valign="top">
	<table width="100%" border="0">
		<tr>
			<td colspan="3">
			<form action="${ctx }/admin/role/new" method="post">
			<fmt:message key="role.new" />
				<input type="text" name="name"/>
				<input name="submit" type="submit" value="<fmt:message key="common.submit"/> "/>
			</form>
			</td>
		</tr>
	</table>
	<table width="100%" class="solidtable">
		<tr>
			<td class="solidtr" align="center" width="30"><fmt:message key="common.id"/></td>
			<td class="solidtr"><fmt:message key="role.name"/></td>
			<td class="solidtr" width="130" align="center"><fmt:message key="common.action"/></td>
		</tr>
		<c:forEach items="${roles}" var="role">
		<tr style="height:23px;">
			<td align="center"><c:out value="${role.id}"/></td>
			<td><c:out value="${role.name}"/></td>
			<td align="center">
				<a href="${ctx }/admin/role/<c:out value="${role.id}"/>/authority"><fmt:message key="role.authority"/></a>
				| <a name="update" href="javascript:void(0);"><fmt:message key="common.update"/></a>
				| <a href="${ctx }/admin/role/<c:out value="${role.id}"/>/delete"><fmt:message key="common.delete"/></a>
			</td>
		</tr>
		<tr style="height:23px;display: none;">
			<td align="center"><c:out value="${role.id}"/></td>
			<td>
				<form action="${ctx }/admin/role/<c:out value="${role.id}"/>/edit" method="post">
				<input type="text" name="name" value="<c:out value="${role.name}"/>"/>
				<input name="submit" type="submit" value="<fmt:message key="common.submit"/> "/>
				</form>
			</td>
			<td align="center">
				<a name="cancel" href="javascript:void(0);"><fmt:message key="common.cancel"/></a>
			</td>
		</tr>
		</c:forEach>
	</table>
</td>
<td>
	<c:if test="${role!=null && roleAddAuthority !=null && roleAddAuthority}">
	<form action="${ctx}/admin/role/<c:out value="${role.id }"/>/authority" method="post">
	<table>
	<tr>
		<td colspan="3"><fmt:message key="role.name"/>: <c:out value="${role.name }"/></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>
			<select multiple="multiple" name="authorityList" size="15" style="width:150px;">
				<c:forEach items="${role.authorityList}"  var="authority">
				<option value="${authority.id}"><c:out value="${authority.name}"/></option>
				</c:forEach>
			</select>
			<input type="hidden" name="_authorityList"/>
		</td>
		<td>
			<input type="button" name="add" value="&lt;&lt;<fmt:message key="role.add.authority"/>"/>
			<br/>
			<input type="button" name="remove" value="<fmt:message key="role.remove.authority"/>&gt;&gt;"/>
		</td>
		<td>
			<select multiple="multiple" name="otherAuthority" size="15" style="width:150px;">
				<c:forEach items="${authorities}"  var="authority">
				<option value="${authority.id}"><c:out value="${authority.name}"/></option>
				</c:forEach>
			</select>
		</td>
	</tr>
	<tr>
		<td colspan="3" align="center">
			<input name="selectAuthority" type="submit" value="<fmt:message key="common.submit" />"/>
		</td>
	</tr>
	</table>
	</form>
	</c:if>
</td>
</tr>
</table>
</div>

<script type="text/javascript">
$(document).ready(function(){
	$("a[name='update']").click(function(){
		$("a[name='cancel']").parent().parent().hide();
		$("a[name='update']").parent().parent().show();
		$(this).parent().parent().hide();
		$(this).parent().parent().next().show();
	});
	$("a[name='cancel']").click(function(){
		$("label").html("");
		$(this).parent().parent().hide();
		$(this).parent().parent().prev().show();
	});
	///select 
	$("input[name='add']").click(function(){
		if($("select[name='otherAuthority'] option:selected").length>0){
			$("select[name='otherAuthority'] option:selected").each(function(){
				$(this).remove(); 
				$("select[name='authorityList']").append("<option value="+$(this).val()+">"+$(this).text()+"</option");		
			});
		}
	});
	$("input[name='remove']").click(function(){
		if($("select[name='authorityList'] option:selected").length>0){
			$("select[name='authorityList'] option:selected").each(function(){
				$(this).remove(); 
				$("select[name='otherAuthority']").append("<option value="+$(this).val()+">"+$(this).text()+"</option");		
			});
		}
	});
	$("input[name='selectAuthority']").click(function(){
		$("select[name='authorityList'] option").each(function(){
			$(this ).attr("selected",true);
		});
	});
	$("input[name='submit']").click(function(){
		if(jQuery.trim($(this).prev().val())==""){
			$("#error").html("<font color='red'> name is requied.</font>");
			return false;
		}
	});
});
</script>
</body>
</html>